<template>
  <div>
    <div class="m-layout" :class="'m-layout-' + type">
      <!--头部固定区域-->
      <header>
        <slot name="header"></slot>
      </header>
      <!--主内容区域-->
      <div class="m-content">
        <slot name="body"></slot>
      </div>
      <!--底部固定区域-->
      <div class="m-bottom" v-if="$slots.bottom">
        <slot name="bottom"></slot>
      </div>
    </div>
    <!--其他，如弹出层-->
    <slot></slot>
  </div>
</template>

<script>
export default {
  componentName: 'MLayout',
  props: {
    type: {
      type: String,
      default: 'default'
    }
  }
}
</script>

<style lang="scss">
  .m-layout{
    display: flex;
    flex-direction: column;
    position:absolute;
    width:100%;
    height:100%;
    .m-content{
      flex: 1;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
    }
    .m-bottom{
      background:#fff;
      position:relative;
      padding:0.16rem;
    }
    &-default{
      .m-content{
        background:$color-background-base;
      }
    }
    &-primary{
      .m-bottom{
        &:before{
          @include divider;
          top:0;
          bottom:auto;
        }
      }
    }
  }
</style>
